const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

console.log(process.env.NODE_ENV, 'process.env.NODE_ENv');
module.exports = {
  mode: process.env.NODE_ENV, // 设置模式，默认为production
  // devtool: 'hidden-source-map',
  devtool: 'eval-source-map',
  optimization: { // 优化项
    minimize: true, // 开启
    minimizer: [
      new TerserPlugin(), // 配置js压缩
    ],
  },
  devServer: {
    port: 9100,
    open: true,
    contentBase: path.resolve(__dirname, 'dist'), // 额外的静态文件目录
    compress: true, // 是否启动压缩 gzip
  },
  entry: {
    index: './src/index.js',
    index2: './src/index2.js',
  }, // 方式1.设置入口文件
  output: { // 设置出口文件，告诉webpack打包后的bundle输出到那个位置，如何命名这些文件
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name][hash:6].js',
    publicPath: '/', // index.html引入打包后的css和js文件时加上该路径
  },
  module: { // loader webpack 只能识别js和json文件，loader用来处理其他类型的文件
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: require.resolve('lodash'),
        loader: 'expose-loader',
        options: {
          exposes: {
            globalName: '_',
            override: true,
          },
        },
      },
      {
        test: /\.js$/,
        loader: 'eslint-loader', // 进行代码风格检查
        enforce: 'pre', // 给loader进行分类，pre=>normal=>inline=>post
        options: { fix: true }, // 如果发现不合要求，会自动修复
        exclude: ['/node_modules/', '/dist/'], // 排除node_modules文件
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
              plugins: [
                ['@babel/plugin-proposal-decorators', { legacy: true }],
                ['@babel/plugin-proposal-class-properties', { loose: true }],
              ],
            },
          },
        ],
      },
      {
        test: /\.txt$/, // 要处理的文件后缀
        use: 'raw-loader', // 处理所使用的loader
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jgp|gif|bmp|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 6 * 1024,
              esModule: false,
              // emitFile: false,
              name: '[hash:10].[ext]',
              outputPath: 'images', // 将图片打包到images目录下
              publicPath: '/images', // 将源文件打包后，图片引入会加上该路径
            },
          },
        ],
        type: 'javascript/auto', // 解决webpack5新的资源系统和url-loader,file-loader打包出两个图片问题
      },
    ],
  },
  plugins: [// plugin的作用：打包优化，资源管理，注入环境变量
    new MiniCssExtractPlugin({
      filename: 'css/[contenthash:6].css',
    }),
    new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['**/*'] }),
    new HtmlWebpackPlugin({ // 将模板html打包到dist目录，并引入打包后的bundle
      template: './src/index.html',
      minify: { // 配置打包的html文件一些优化
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
    new OptimizeCssAssetsWebpackPlugin(), // css 压缩
  ],

};
